<!--
 * @Descripttion:账单管理-交班汇总
 * @Author: 森哥
 * @Date: 2022-11-07 11:56:05
 * @LastEditors: xiaodi 53527718@qq.com
 * @LastEditTime: 2025-10-09 23:20:39
-->
<template>
  <div>
    <div class="dailySale-content-wrap">
      <!-- 左边盒子 -->
      <div class="left-box">
        <div class="dailySale-title">交班汇总表</div>
        <div class="grid2">
          <div class="dailySale-list-wrap">
            <!-- 头部搜索栏 -->
            <div class="search-box-wrap">
              <!-- 查询时间 -->
              <div class="betweenTime-box">
                <el-date-picker
                  class="date-picker"
                  v-model="dateRangeList"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD HH:mm:ss"
                >
                </el-date-picker>
              </div>
              <!-- 选择交班人 -->
              <div class="payMethod-box">
                <el-select v-model="selectShiftId" class="select" placeholder="请选择交班人">
                  <el-option
                    v-for="item in shiftReportListArray"
                    :key="item.store_user_id"
                    :label="item.user_name"
                    :value="item.store_user_id"
                  >
                  </el-option>
                </el-select>
                <span class="search-box" @click="handleSelectWorker">确定</span>
              </div>
            </div>
          </div>
          <div class="detail-box">
            <!-- 暂无数据展示 -->
            <div v-if="!workLogTicketDetailData && !isLoading" class="no-data-container">
              <NotData desc="暂无交班数据" />
            </div>
            <!-- 交班卡片 -->
            <HandoverBillCard
              v-show="workLogTicketDetailData || isLoading"
              ref="HandoverBillCardRef"
              :isShow="workLogTicketDetailData === null"
              :selectCheckedList="selectCheckedList"
              :loading="isLoading"
            ></HandoverBillCard>
            <div class="button-box" v-if="workLogTicketDetailData">
              <div class="confirm-btn" @click="handlePrint">打印</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import HandoverBillCard from '../handoverBill/components/HandoverBillCard/Index.vue'
import NotData from '@/components/NotData/Index.vue'
import { retailList, getShiftReport } from '@/api/desktop'
import { debounce, dealAssignDataFunction, fetchObjectDeepAttrValue } from '@/utils/toolsValidate'
import { printerReprint } from '@/api/common'
import { ElMessage } from 'element-plus'

// 组件ref
const HandoverBillCardRef = ref(null)

// 响应式数据
const selectCheckedList = ref([
  { value: 1 },
  { value: 2 },
  { value: 3 },
  { value: 4 },
  { value: 5 },
  { value: 6 },
  { value: 7 },
  { value: 8 },
  { value: 9 },
  { value: 10 }
])

const pageListQuery = ref({
  betweenTime: []
})

const shiftReportListArray = ref([])
const workLogTicketDetailData = ref(null)
const selectShiftId = ref('')
const dateRangeList = ref([])
const isLoading = ref(false)
const showDetailsEnum = ref({
  isShowRechargeDetails: true,
  isShowCollectionDetails: true,
  isShowSettleAccountsDetails: true,
  isShowBillDetails: true,
  isShowCreditDetails: true,
  isShowRecordDetails: true
})

// 生命周期钩子
onMounted(() => {
  getShiftReportList()
})

// 方法定义
function onChangeShowEnum(value) {
  showDetailsEnum.value[value] = !showDetailsEnum.value[value]
}

async function handleSelectWorker() {
  // 验证是否选择了交班人
  if (!selectShiftId.value) {
    ElMessage.warning('请先选择交班人')
    return
  }

  let start_time = ''
  let end_time = ''
  if (dateRangeList.value && dateRangeList.value.length > 0) {
    start_time = dateRangeList.value[0] 
    end_time = dateRangeList.value[1] 
  }
  const datas = {
    start_time: start_time,
    end_time,
    clerk_id: selectShiftId.value
  }

  isLoading.value = true
  workLogTicketDetailData.value = null

  try {
    // 确保组件引用存在
    if (!HandoverBillCardRef.value) {
      ElMessage.error('组件未正确加载，请刷新页面重试')
      return
    }

    const res = await HandoverBillCardRef.value.ticketDetail(datas)
    console.log(res, 'res')
    if (!res) {
      workLogTicketDetailData.value = null
      return
    }
    workLogTicketDetailData.value = dealAssignDataFunction(null, res)
  } catch (error) {
    console.error('获取交班数据失败:', error)
    ElMessage.error('获取数据失败: ' + (error.message || '未知错误'))
    workLogTicketDetailData.value = null
  } finally {
    isLoading.value = false
  }
}

async function getShiftReportList() {
  try {
    const res = await retailList(pageListQuery.value)
    if (res.status === 200) {
      shiftReportListArray.value = dealAssignDataFunction({}, res?.data?.list)
    }
  } catch (error) {
    ElMessage.error('获取交班报告列表失败: ' + error.message)
  }
}

async function getWorkLogTicketDetail() {
  let start_time = ''
  let end_time = ''
  if (dateRangeList.value && dateRangeList.value.length > 0) {
    start_time = dateRangeList.value[0] + ' 00:00:00'
    end_time = dateRangeList.value[1] + ' 23:59:59'
  }
  const datas = {
    start_time: start_time,
    end_time,
    clerk_id: selectShiftId.value
  }

  try {
    const res = await getShiftReport(datas)
    if (res.status === 200) {
      workLogTicketDetailData.value = dealAssignDataFunction(null, res?.data)
    }
  } catch (error) {
    ElMessage.error('获取交班小票数据失败: ' + error.message)
  }
}

async function handlePrint() {
  if (!workLogTicketDetailData.value) {
    ElMessage.error('没有可打印的数据')
    return
  }
  try {
    const res = await printerReprint({
      ticket_id: workLogTicketDetailData.value.ticket_id,
      check_list: selectCheckedList.value.map(item => item.value)
    })
    if (res.status === 200) {
      ElMessage.success('推送打印成功')
    }
  } catch (error) {
    ElMessage.error('打印失败: ' + error.message)
  }
}

// 暴露给模板的方法
defineExpose({
  handlePrint
})
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    border-radius: 12px;
  }
}
.hide {
  display: none !important;
  transition: all 1s !important;
}
.show {
  display: block !important;
  transition: all 1s !important;
}
.dailySale-content-wrap {
  display: flex;
  align-items: flex-start;
  .fullWidth {
    width: 1600px !important;
    transition: all 1s !important;
  }
  .left-box {
    box-sizing: border-box;
    width: 1600px;
    height: 986px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
    transition: all 1s;
    .dailySale-title {
      width: 1600px;
      height: 88px;
      background: #f4f4f4;
      border-radius: 20px 20px 0px 0px;
      font-size: 20px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 1s;
    }

    .dailySale-list-wrap {
      // width: 1600px;
      transition: all 1s;

      .search-box-wrap {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        box-sizing: border-box;
        padding: 0 30px;
        margin-top: 20px;

        .betweenTime-box {
          // margin-right: 30px;
          .betweenTime-text {
            font-size: 16px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            color: #333333;
            margin-left: 20px;
            margin: 20px;
          }
        }

        .search-input-box {
          .search-btn {
            width: 88px;
            height: 48px;
            background: #7c0a03;
            border-radius: 12px;
            margin-left: 35px;
            font-size: 14px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }
        }
        .payMethod-box {
          display: flex;
          gap: 20px;
          margin-top: 20px;
        }
      }

      .data-summary-box {
        display: flex;
        margin-top: 30px;
        justify-content: space-between;
        padding-left: 30px;
        align-items: center;

        .summary-text {
          font-size: 14px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          color: #30314a;
        }

        .sumary-btn-group {
          display: flex;
          justify-content: space-around;
          align-items: center;

          .create-dishes {
            width: 156px;
            height: 52px;
            background: #ffffff;
            border: 1px solid #333333;
            border-radius: 12px;
            font-size: 18px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            color: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }

          .print {
            width: 156px;
            height: 52px;
            background: #ffffff;
            border: 1px solid #333333;
            border-radius: 12px;
            font-size: 18px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            color: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin-left: 40px;
          }

          .cancel-closing {
            width: 138px;
            height: 52px;
            background: #ffffff;
            border: 1px solid #333333;
            border-radius: 12px;
            font-size: 18px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            color: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 40px;
            cursor: pointer;
          }

          .cancel {
            width: 120px;
            height: 52px;
            margin-left: 40px;
            cursor: pointer;
            background: #ffffff;
            border: 1px solid #333333;
            border-radius: 12px;
            font-size: 18px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            color: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .detail-box {
      margin-top: 30px;
      margin-right: 30px;
      .detail-pay-box {
        width: 420px;
        height: 750px;
        background: #ffffff;
        border: 1px solid #d2d2d2;
        box-sizing: border-box;
        padding: 30px;
        overflow-y: auto;
        .flex-row {
          display: flex;
          flex-direction: row;
        }

        .flex-col {
          display: flex;
          flex-direction: column;
        }

        .justify-start {
          justify-content: flex-start;
        }

        .justify-center {
          justify-content: center;
        }

        .justify-end {
          justify-content: flex-end;
        }

        .justify-evenly {
          justify-content: space-evenly;
        }

        .justify-around {
          justify-content: space-around;
        }

        .justify-between {
          justify-content: space-between;
        }

        .items-start {
          align-items: flex-start;
        }

        .items-center {
          align-items: center;
        }

        .items-end {
          align-items: flex-end;
        }
        .text_15 {
          align-self: center;
          color: #353535;
        }
        .text_70 {
          margin-top: 20px;
          align-self: center;
        }
        .font_5 {
          font-size: 18px;
          font-family: PingFang SC Regular;
          color: #333333;
        }
        .font_2 {
          font-size: 14px;
          font-family: PingFang SC Regular;
          color: #333333;
        }
        .space-x-line {
          margin-top: 10px;
          width: 100%;
          border-top: solid 1px #e2e2e2;
        }
        .font_6 {
          font-size: 20px;
          font-family: PingFang SC Bold;
          font-weight: 700;
        }
        .font_8 {
          font-size: 14px;
          font-family: PingFang SC Bold;
          font-weight: 700;
          color: #333333;
        }
        .font_9 {
          font-size: 14px;
          font-family: PingFang SC Bold;
          font-weight: 700;
          color: #333333;
        }
        .group_17 {
          margin-top: 20px;
        }
        .group_18 {
          margin-top: 10px;
        }
        .group_49 {
          margin-top: 10px;
          padding-top: 20px;
          border-top: solid 1px #e2e2e2;
        }
        .group_59 {
          margin-top: 10px;
          padding: 10px 0;
          border-top: solid 1px #e2e2e2;
          border-bottom: solid 1px #e2e2e2;
        }
        .group_60 {
          margin-top: 10px;
          padding-bottom: 10px;
          border-bottom: solid 1px #e2e2e2;
        }
        .group_62 {
          margin-top: 10px;
        }
        .group_65 {
          margin-top: 20px;
        }
        .group_64 {
          margin-top: 10px;
          padding: 10px 0;
          border-top: solid 1px #e2e2e2;
          border-bottom: solid 1px #e2e2e2;
        }
        .text_101 {
          margin-top: 12px;
          align-self: center;
        }
        .text_106 {
          margin-top: 20px;
          align-self: center;
        }
        .text-wrapper_16 {
          align-self: center;
          padding-top: 10px;
          margin-top: 10px;
          width: 100%;
          border-top: solid 1px #e2e2e2;
        }
      }
      //滚动条整体的大小
      .detail-pay-box::-webkit-scrollbar {
        width: 6px !important;
        height: 0 !important;
      }
      //滚动条里滑动的滑块
      .detail-pay-box::-webkit-scrollbar-thumb {
        height: 200px !important;
        background: #d2d2d2 !important;
        border-radius: 3px !important;
      }
      //滚动条底层样式
      .detail-pay-box::-webkit-scrollbar-track {
        display: none !important;
      }
    }
  }
  .button-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    .confirm-btn {
      width: 420px;
      height: 52px;
      background: #7c0a03;
      border-radius: 12px;
      line-height: 52px;
      font-size: 18px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      cursor: pointer;
    }
  }
}
.search-box {
  width: 0.5rem;
  height: 40px;
  background: #7c0a03;
  border-radius: 0.0625rem;
  font-size: 0.09375rem;
  font-family:
    PingFang SC,
    PingFang SC-Regular;
  font-weight: 400;
  color: #ffffff;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
  margin-left: 0.15625rem;
}
.grid2 {
  display: flex;
  gap: 30px;
  // grid-template-columns: repeat(2 auto);
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  > span {
    &:first-child {
      text-align: left;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.detail-box {
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  box-sizing: border-box;
  > .handover-card-box {
    height: 700px;
  }

  .no-data-container {
    width: 420px;
    height: 700px;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
